<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>LiquidView - Unicorn Examples</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="../assets/demo/demo.css" />

<script type="text/javascript" src="../yui-base.js"></script>
<script type="text/javascript" src="../unicorn.js"></script>

<!--
<script type="text/javascript" src="http://iunicorn.googlecode.com/files/yui-base-2.5.2.min.js"></script>
<script type="text/javascript" src="http://iunicorn.googlecode.com/files/unicorn-0.4.0.min.js"></script>
-->

</head>

<body>
<!-- demo1 -->
<style type="text/css">
	#demo1-wrapper {
		width: 550px;
		overflow: hidden
		}
	#demo1 {
		display: block; height: 125px;
		background: url('../assets/demo/liquid-demo1-right.gif') top right no-repeat
		}
	#demo1 li { float: left }
	.lv-panel {
		display: block;
		overflow: hidden;
		height: 125px;
		width: 178px;
		border-right: 5px solid #FFF;
	}
	.lv-panel span { display: block; width: 0; height: 0; position: relative; top: -9999px; left: -9999px; overflow: hidden }
	#demo1 .web { background: #FFF url(http://cet.hjenglish.com/subject/recommand/images/bbs.gif) }
	#demo1 .print { background: #FFF url(http://cet.hjenglish.com/subject/recommand/images/channel.jpg) }
	#demo1 .media { background: #FFF url(http://cet.hjenglish.com/subject/recommand/images/download.gif); border-right: none }
</style>
<div id="demo1-wrapper">
	<ul id="demo1">
		<li><a class="lv-panel web" target="_blank" href="http://www.hjbbs.com/forum-18.htm"><span>中国最火的四六级论坛</span></a></li>
		<li><a class="lv-panel print" target="_blank" href="http://cet.hjenglish.com/"><span>最好的四六级频道</span></a></li>
		<li><a class="lv-panel media" target="_blank" href="http://cet.hjenglish.com/download"><span>最全的四六级资料下载</span></a></li>
	</ul>
</div>
<!-- end of demo1 -->

<!-- demo2 -->
<style type="text/css">
	#demo2-wrapper { display: block; width: 484px; height: 258px; margin-top: 20px; overflow: hidden; padding: 1px; border: 1px solid gray }
	#demo2 { width: 2000px } /* 保证所有图片float: left时都能够水平一行排布，否则容易造成闪烁 */
	#demo2 li { float: left; border-right: 1px solid #fff }
	#demo2 .last { border-right: 0 }
	#demo2 a { display: block; overflow: hidden; width: 96px }
</style>
<div id="demo2-wrapper">
	<ul id="demo2">
		<li><a href="#"><img src="http://pics1.paipaiimg.com/update/20080828/index_hj2_400_258.jpg" /></a></li>
		<li><a href="#"><img src="http://pics2.paipaiimg.com/update/20080901/index_ym_400_258.jpg" /></a></li>
		<li><a href="#"><img src="http://pics0.paipaiimg.com/update/20080829/index_n_400_258.jpg" /></a></li>
		<li><a href="#"><img src="http://pics3.paipaiimg.com/update/20080820/lady_400_258.jpg" /></a></li>
		<li class="last"><a href="#"><img src="http://pics3.paipaiimg.com/update/20080812/lady_index_s-400_258.jpg" /></a></li>
	</ul>
</div>
<!-- end of demo2 -->

<!-- demo3 -->
<style type="text/css">
	.slide-container { overflow:hidden; height:344px; width:250px; margin-top: 20px }
	.slide-wrapper li { overflow: hidden; border-bottom: 1px solid #fff }
	#demo3 a { display: block; overflow: hidden; height: 68px }
	#demo3 .last { border-bottom: none }
</style>
<div class="slide-container">
	<ul class="slide-wrapper" id="demo3">
		<li><a href="#"><img src="http://pics.taobao.com/forum/adminupload/900c5bc5-530e-4381-87d6-17dd5c23555a.jpg" /></a></li>
		<li><a href="#"><img src="http://pics.taobao.com/forum/adminupload/31892281-ba4c-43a8-82a0-402d5bd4d405.jpg" /></a></li>
		<li><a href="#"><img src="http://img.taobao.com/forum/adminupload/63f997e7-bba7-4a1f-940f-3373b0cb1bf3.jpg" /></a></li>
		<li><a href="#"><img src="http://cn.yimg.com/a/amyy/682662_250-260_081508.jpg" /></a></li>
		<li class="last"><a href="#"><img src="http://pics.taobao.com/forum/adminupload/0ae6b987-e977-46c5-a92b-e7594849b0c3.jpg" /></a></li>
	</ul>
</div>
<!-- end of demo3 -->

<script type="text/javascript">	
Unicorn.util.Event.onDOMReady(function() {

	// demo1
	Unicorn.widget.LiquidView.decorate('demo1', 
		{ animEasing: Unicorn.util.Easing.elasticOut,
		  maxWidth: 280,
		  minWidth: 125,
		  normalWidth: 178
		});
	
	// demo2
	Unicorn.widget.LiquidView.decorate('demo2', 
		{ animEasing: Unicorn.util.Easing.easeOutStrong,
		  maxWidth: 400,
		  minWidth: 20,
		  normalWidth: 96
		});

	// demo3
	Unicorn.widget.LiquidView.decorate('demo3', 
		{ 
		  effect: 'scrolly',
		  animEasing: Unicorn.util.Easing.easeOutStrong,
		  maxHeight: 260,
		  minHeight: 20,
		  normalHeight: 68
		});
});
</script>
<a class="reply-link" href="http://lifesinger.org/blog/?page_id=8">&gt;&gt; 期待您的建议与反馈 &lt;&lt;</a>
</body>
</html>
